<template>
  <div class="homeheader">
    <div class="center-title">渝荣高速资源监测平台</div>
    <div class="titlebuttondiv fb">
      <div class="titlebuttonleft fa">
        <div :class="[active == 'zhuye' ? 'activediv' : 'normaldiv', 'titlebuttondivitem']" @click="switchto('zhuye')">首页</div>
        <div :class="[active == 'etc' ? 'activediv' : 'normaldiv' , 'titlebuttondivitem']" @click="switchto('etc')">ETC门架</div>
        <div :class="[active == 'cost' ? 'activediv' : 'normaldiv' , 'titlebuttondivitem']" @click="switchto('cost')">收费广场</div>
      </div>
      <div class="titlebuttonright fa">
        <div :class="[active == 'server' ? 'activediv' : 'normaldiv' , 'titlebuttondivitem']" @click="switchto('server')">机房</div>
        <div :class="[active == 'backpage' ? 'activediv' : 'normaldiv' , 'titlebuttondivitem']" @click="switchto('backpage')">后台管理</div>
        <div>
          <div style="font-size:16px;color: white;" class="fccc">
            <div>
              {{nowTimes.year}}-{{nowTimes.yy}}-{{nowTimes.dd}}
            </div>
            <div>
              {{nowTimes.hou}}:{{nowTimes.min}}
            </div>
          </div>
        </div>

      </div>

    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      active: 'zhuye',
      nowTimes: {
        year: '1111',
        yy: 0,
        dd: "00",
        hou: "00",
        min: "00",
        sec: "00"
      }
    };
  },
  computed: {},
  watch: {},
  mounted() {
    setInterval(() => {
      this.setNowTimes();
    }, 1000);
  },
  methods: {
    switchto(type){
      this.active = type
      if(this.active == 'zhuye'){
        this.$router.push('/home/')
      }else if(this.active == 'etc'){
        this.$router.push('/home/etc')
      }else if(this.active == 'cost'){
        this.$router.push('/home/cost')
      }else if(this.active == 'server'){
        this.$router.push('/home/server')
      }else if(this.active == 'backpage'){
        this.$router.push('/')
      }

    },
    setNowTimes() {
      let myDate = new Date();
      this.nowTimes.year = myDate.getFullYear();
      this.nowTimes.yy = myDate.getMonth() + 1;
      this.nowTimes.dd = String(
        myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate()
      );
      this.nowTimes.hou = String(
        myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours()
      );
      this.nowTimes.min = String(
        myDate.getMinutes() < 10
          ? "0" + myDate.getMinutes()
          : myDate.getMinutes()
      );
      this.nowTimes.sec = String(
        myDate.getSeconds() < 10
          ? "0" + myDate.getSeconds()
          : myDate.getSeconds()
      );
    },
    toback() {
      this.$router.push("/");
    }

  }

};
</script>
<style lang='scss' scoped>
.homeheader {
  position: relative;
  // width: calc(100%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
  height: 100%;

  .titlebuttondiv{
    position: absolute;
    width: 100%;
    top: 10px;
    height: 100%;
  }

  .titlebuttonleft{
    width: 30%;
    height: 100%;
    font-size:15px;
  }
  .titlebuttonright{
    width: 30%;
    height: 100%;
    font-size:15px;
  }

  .titlebuttondivitem{
    color: white;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    cursor:pointer;
  }

  .activediv{
    background-image: url('/home/xuanzhong.png');
    background-size: 100% 100%;
  }

  .normaldiv{
    background-image: url('/home/weixuanzhong.png');
    background-size: 100% 100%;
  }

  .center-title {
    position: absolute;
    font-size: 35px;
    font-weight: bold;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    color: white;
  }
}
</style>
